<template>
  <div class="findHeaderContianer">
    <van-tabs v-model:active="active" swipeable scrollspy>
      <van-tab
        v-for="(item, index) in titleArr"
        :title="item"
        :disabled="index == titleArr.length - 1"
        :key="item"
      >
        <find-view :name="item"></find-view>
      </van-tab>
    </van-tabs>
    <div
      class="iconfont icon-sousuoxiao search-icon"
      @click="toSerachView"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeRouteUpdate } from "vue-router";
import { ref } from "@vue/reactivity";
import findView from "./find/findView.vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { onBeforeMount, watch } from "@vue/runtime-core";
const store = useStore();
// let titleArr = ref<string[]>(['阅读', '图文', '专题', '热榜', '问答', '音乐', '影视', '电台', '小记', '作者', ' '])
let titleArr = ref<string[]>([
  "阅读",
  "图文",
  "专题",
  "问答",
  "小记",
  "作者",
  " ",
]);
let index = titleArr.value.indexOf(localStorage.getItem("findType") + "");
let active = ref<number>(index > -1 ? index : 2);
const router = useRouter();
watch(
  () => titleArr.value[active.value],
  (newType) => {
    console.log("watch-----" + newType);
    router.push({
      path: "/find",
      query: {
        type: newType,
      },
    });
  }
);
onBeforeMount(() => {
  console.log(titleArr.value[active.value]);
});
onBeforeRouteUpdate((to, from) => {
  if (
    to.query.type == "阅读" ||
    to.query.type == "图文" ||
    to.query.type == "问答"
  ) {
    store.commit("changeReadisShow", true);
  } else {
    store.commit("changeReadisShow", false);
  }
  if (to.query.type == "小记") {
    store.commit("changePublishisShow", true);
  } else {
    store.commit("changePublishisShow", false);
  }
  // console.log(store.state.read_show);
  localStorage.setItem("findType", to.query.type + "");
  console.log("onBeforeRouteUpdate" + to.query.type);
});
let toSerachView = () => {
  router.push({ name: "search" });
};
</script>

<style lang="less">
.findHeaderContianer {
  .van-tabs__line {
    display: none;
  }
  .van-tab--active {
    font-size: 20px;
  }
  .van-tabs__wrap {
    position: fixed;
    width: 100%;
    z-index: 100;
  }
}
</style>